<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用bind</title>
    <script src="../react/react.development.js"></script>
    <script src="../react/react-dom.development.js"></script>
    <script src="../react/prop-types.js"></script>
    <script src="../react/babel.min.js"></script>
</head>
<body>
<div id="root">

</div>
<script type="text/babel">
    const Fragment = React.Fragment

    class MyComp extends React.Component {
        // 属性的es7新写法
        state = {
            isLike: true
        }

        // 改变状态时触发
        componentDidUpdate () {
            console.log('state change')
        }

        // 改变状态函数
        changeHandler () {
            this.setState({
                isLike: !this.state.isLike
            })
        }

        // 渲染函数 每次状态改变都会重新渲染
        render () {
            console.log('render')
            let { isLike } = this.state
            let msg = ''
            if (isLike) {
                msg = <div>😊喜欢</div>
            } else {
                msg = <div>😒讨厌</div>
            }
            return (
                <Fragment>
                    <button onClick={this.changeHandler.bind(this)}>切换</button>
                    {msg}
                </Fragment>
            )
        }
    }

    ReactDOM.render(<MyComp></MyComp>, document.getElementById('root'))
</script>
</body>
</html>
